<template>
	<a-list-item :key="item.srfkey">
		<slot v-if="hasSlot('default')" name="default"></slot>
		<a-list-item-meta v-else :description="item.srfdescription">
			<template #title>
				<slot v-if="hasSlot('listItemTitle')" name="listItemTitle"></slot>
				<span v-else class="list-item__title">{{ item.srfmajortext }}</span>
			</template>
			<template #avatar>
				<slot v-if="hasSlot('listItemIcon')" name="listItemIcon"></slot>
				<img v-else :src="item.srficon" />
			</template>
		</a-list-item-meta>
		<template #actions>
			<slot name="listItemActions"></slot>
		</template>
		<down-outlined
			v-if="item.isGroupItem && item.isExpand"
			@click.stop="handleExpaned"
		/>
		<up-outlined
			v-if="item.isGroupItem && !item.isExpand"
			@click.stop="handleExpaned"
		/>
	</a-list-item>
</template>
<script setup lang="ts">
import { ListItemProps } from '../list';
import { DownOutlined, UpOutlined } from '@ant-design/icons-vue';
const emit = defineEmits<{
	(event: 'update:isExpand', value: boolean): void;
	(name: 'expanedChange', isExpand: boolean): void;
}>();

const props = defineProps(ListItemProps);

const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};

const handleExpaned = (e: MouseEvent) => {
	emit('expanedChange', !props.item.isExpand);
};
</script>
